import {
  CardCvcElement,
  CardExpiryElement,
  CardNumberElement
} from "@stripe/react-stripe-js"
import classNames from "classnames"
import { useSkin } from "@hooks/useSkin"
import React from "react"
import { Button, Col, Form, Label, Modal, ModalBody, ModalHeader, Row } from "reactstrap"
import FormGroupElement from "../formGroup/FormGroupElement"
import { X } from "react-feather"

const EditPayment = ({ editModal, setEditModal }) => {
  const { skin } = useSkin()
  const cancel = <X className="pointer" onClick={() => setEditModal(false)} />
  return (
    <>
      <Modal
        isOpen={editModal}
        toggle={() => setEditModal(!editModal)}
        className="ModalDialoge payment-modal"
      >
        {/* <PaymentElement/> */}
        <ModalHeader className="mt-1 ModalHeader pb-0 d-flex align-items-center">
          <span className="mb-0 fw-bold fs-22 black">Edit Payment Method</span>
          {cancel}
        </ModalHeader>
        <ModalBody  className="modalBody">
          <Form>
            <Row>
              <Col lg={12}>
                <Label className="ModalLabel">Card Number</Label>
                <CardNumberElement className="stripe-input radius-25 border px-1" />
              </Col>
              <Col lg={8}>
                <div>
                  <Label className="ModalLabel">Expiration Date</Label>
                  <CardExpiryElement className="stripe-input radius-25 border px-1" />
                </div>
              </Col>
              <Col lg={4}>
                <div>
                  {/* <Label className="ModalLabel">CVC</Label> */}
                  {/* <CardCvcElement
                    placeholder="---"
                    className="stripe-input radius-25 border px-1"
                  /> */}
                </div>
              </Col>
              <Col lg={12}>
                <div className="d-flex mt-1 align-items-center payment-checkbox ">
                  <FormGroupElement
                    type="text"
                    label="Zip Code"
                    labelClassName="fs-11"
                    inputName="zipCodePayment"
                    inputClassName={classNames({
                      "form-fields  border radius-25": true,
                      lightColors: skin === "dark"
                    })}
                    // {...formik.getFieldProps("zipCodePayment")}
                    // formikTouched={formik.touched.zipCodePayment}
                    // formikError={formik.errors.zipCodePayment}
                  />
                  <FormGroupElement
                    type="checkbox"
                    // checked={defaultPayment}
                    label="Default payment method"
                    labelClassName="fs-11"
                    inputName="default"
                    // onChange={() => setDefaultPayment(!defaultPayment)}
                    inputClassName={classNames({
                      lightColors: skin === "dark"
                    })}
                    formGroupClassName="client_profile--checkbox pl-1"
                  />
                  <FormGroupElement
                    type="checkbox"
                    // checked={auto}
                    label="Auto Pay"
                    labelClassName="fs-11"
                    inputName="autoPay"
                    // onChange={() => setAuto(!auto)}
                    inputClassName={classNames({
                      lightColors: skin === "dark"
                    })}
                    formGroupClassName="client_profile--checkbox"
                  />
                </div>
              </Col>
              <Col lg={12}>
                <div className="ModalFooter float-right mb-1 payment-box-footer ">
                  <Button
                    size="sm"
                    className="ModalCancel"
                    onClick={() => setEditModal(!editModal)}
                  >
                    Cancel
                  </Button>
                  <Button
                    size="sm"
                    className="ModalAdd ml-1  "
                    // onClick={fetchClientSecret}
                    disabled
                  >
                    Save
                  </Button>
                </div>
              </Col>
            </Row>
          </Form>
        </ModalBody>
      </Modal>
    </>
  )
}

export default EditPayment
